<template>
	<view class="code">
		<view class="top">
			<view class="top-left">
				<image src="../../static/image/images/icon_cha.png" mode=""></image>
				<text class="text">已有{{arr.length}}个行程了</text>
			</view>
			<view class="top-right">
				<image src="../../static/image/images/77.png" mode=""></image>
				<text class="text">历史</text>
			</view>
		</view>
		
		<view class="centent" v-for="(item,index) in arr" :key="item.id">
			<view class="centent-top1">
				{{item.date}} {{item.time}} {{item.week}} 名厨上门
			</view>
			<view class="centent-top2">
				{{item.addr}}
			</view>
			<image :src="item.image" mode=""></image>
			<view class="centent-bom">
				<view class="centent-bom-left">
					<view class="centent-bom-left1">
						{{item.title}}
					</view>
					<view class="centent-bom-left2">
						￥{{item.price}}/桌
					</view>
				</view>
				<view class="centent-bom-right">
					<view class="centent-bom-right1">
						<image src="../../static/image/images/93.png" mode=""></image>
						<view class="text">
							电话
						</view>
					</view>
					<view class="centent-bom-right2">
						<image src="../../static/image/images/92.png" mode=""></image>
						<view class="text">
							服务
						</view>
					</view>
				</view>
			</view>
			<button class="btn">我的账单</button>
		</view>
	</view>
</template>
	
<script>
	export default {
		data(){
			return{
				arr: [
					{id:0, date:'04-14', time:'12:40', week:'周四', addr:'武汉传媒学院6号楼', title:'咖啡面包糠', price:'188', image:'../../static/image/images/goods1.jpg'},
					{id:1, date:'04-13', time:'12:00', week:'周三', addr:'武汉传媒学院7号楼', title:'咖啡面包糠2', price:'288', image:'../../static/image/images/goods2.jpg'},
					{id:2, date:'04-16', time:'22:40', week:'周六', addr:'武汉传媒学院8号楼', title:'咖啡面包糠3', price:'888', image:'../../static/image/images/goods3.jpg'},
					{id:3, date:'04-24', time:'14:40', week:'周一', addr:'武汉传媒学院行政楼', title:'咖啡面包糠4', price:'688', image:'../../static/image/images/goods1.jpg'}
				]
			}
		}
	}
	
</script>

<style>
	.centent {
		padding: 10px;
		border: 1px solid #d8e5e5;
		box-shadow:1px 2px 3px 1px #b8b8be;
		border-radius: 12px;
	}
	.top {
		display: flex;
		justify-content: space-between;
	}
	.top-left image {
		margin-right: 4px;
		width: 13px;
		height: 13px;
	}
	.top-right image {
		margin-right: 4px;
		width: 13px;
		height: 13px;
	}
	.centent {
		width: 88%;
		margin: 5px auto;
	}
	.centent image {
		width: 100%;
	}
	.centent-bom {
		display: flex;
		justify-content: space-between;
	}
	.centent-bom-left1, .centent-bom-left2 {
		text-align: center;
	}
	.centent-bom-left2 {
		color: red;
	}
	.centent-bom-right {
		display: flex;
	}
	.centent-bom-right image {
		width: 22px;
		height: 22px;
	}
	.centent-bom-right1 {
		margin-right: 10px;
	}
	.centent-bom-right1,.centent-bom-right {
		text-align: center;
		color: rgb(188, 159, 14);
	}
	.btn {
		margin-top: 10px;
		color: #ffffff;
		background-color: #0a7cdf;
	}
	
	
</style>
